<template>
  <div>
    <Row :gutter="30">
      <Col span="12">
        <Card :bordered="false">
          <p slot="title">系统信息</p>
          <div class="cardView">
            <div>系统名称</div>
            <div>{{ sysOsInfo.osName }}</div>
          </div>
          <div class="cardView">
            <div>系统架构</div>
            <div>{{ sysOsInfo.osArch }}</div>
          </div>
          <div class="cardView">
            <div>系统版本</div>
            <div>{{ sysOsInfo.osVersion }}</div>
          </div>
          <div class="cardView">
            <div>主机名称</div>
            <div>{{ sysOsInfo.osHostName }}</div>
          </div>
          <div class="cardView">
            <div>主机ip地址</div>
            <div>{{ sysOsInfo.osHostAddress }}</div>
          </div>
        </Card>
      </Col>
      <Col span="12">
        <Card shadow>
          <p slot="title">Java信息</p>
          <div class="cardView">
            <div>java名称</div>
            <div>{{ sysJavaInfo.javaName }}</div>
          </div>
          <div class="cardView">
            <div>java版本</div>
            <div>{{ sysJavaInfo.javaVersion }}</div>
          </div>
          <div class="cardView">
            <div>虚拟机名称</div>
            <div>{{ sysJavaInfo.jvmName }}</div>
          </div>
          <div class="cardView">
            <div>虚拟机供应商</div>
            <div>{{ sysJavaInfo.jvmVendor }}</div>
          </div>
          <div class="cardView">
            <div>虚拟机版本</div>
            <div>{{ sysJavaInfo.jvmVersion }}</div>
          </div>
        </Card>
      </Col>
    </Row>
    <Card :bordered="false" style="margin-top: 30px">
      <p slot="title">系统信息</p>
      <div class="cardView">
        <div>空余内存</div>
        <div>{{ sysJvmMemInfo.jvmFreeMemory }}</div>
      </div>
      <div class="cardView">
        <div>最大内存</div>
        <div>{{ sysJvmMemInfo.jvmMaxMemory }}</div>
      </div>
      <div class="cardView">
        <div>使用率</div>
        <div>{{ sysJvmMemInfo.jvmMemoryUsedRate }}</div>
      </div>
      <div class="cardView">
        <div>总内存</div>
        <div>{{ sysJvmMemInfo.jvmTotalMemory }}</div>
      </div>
      <div class="cardView">
        <div>可用内存</div>
        <div>{{ sysJvmMemInfo.jvmUsableMemory }}</div>
      </div>
      <div class="cardView">
        <div>已使用内存</div>
        <div>{{ sysJvmMemInfo.jvmUsedMemory }}</div>
      </div>
    </Card>
    <!-- <Card>
      <Table
        class="table"
        :loading="loading"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
    </Card> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "java名称",
          key: "javaName",
          align: "center",
          minWidth: 150,
        },
        {
          title: "java版本",
          key: "javaVersion",
          align: "center",
          minWidth: 130,
        },
        { title: "虚拟机名称", key: "jvmName", align: "center", minWidth: 150 },
        {
          title: "虚拟机供应商",
          key: "jvmVendor",
          align: "center",
          minWidth: 100,
        },
        {
          title: "虚拟机版本",
          key: "jvmVersion",
          align: "center",
          minWidth: 120,
        },
        {
          title: "空余内存",
          key: "jvmFreeMemory",
          align: "center",
          minWidth: 110,
        },
        {
          title: "最大内存",
          key: "jvmMaxMemory",
          align: "center",
          minWidth: 100,
        },
        {
          title: "使用率",
          key: "jvmMemoryUsedRate",
          align: "center",
          minWidth: 100,
        },
        {
          title: "总内存",
          key: "jvmTotalMemory",
          align: "center",
          minWidth: 100,
        },
        {
          title: "可用内存",
          key: "jvmUsableMemory",
          align: "center",
          minWidth: 100,
        },
        {
          title: "已使用内存",
          key: "jvmUsedMemory",
          align: "center",
          minWidth: 120,
        },
        {
          title: "系统架构",
          key: "osArch",
          align: "center",
          minWidth: 100,
        },
        {
          title: "主机ip地址",
          key: "osHostAddress",
          align: "center",
          minWidth: 140,
        },
        {
          title: "主机名称",
          key: "osHostName",
          align: "center",
          minWidth: 120,
        },
        {
          title: "系统名称",
          key: "osName",
          align: "center",
          minWidth: 120,
        },
        {
          title: "系统版本",
          key: "osVersion",
          align: "center",
          minWidth: 100,
        },
      ],
      data: [],
      sysOsInfo: {},
      sysJavaInfo: {},
      sysJvmMemInfo: {},
    };
  },
  created() {
    this.getSystem();
  },
  methods: {
    getSystem() {
      this.loading = true;
      this.$http("/chongqing/stage/monitor/query", {}, "get", (res) => {
        if (res.data.code == 1000) {
          this.sysOsInfo = res.data.data.sysOsInfo;
          this.sysJavaInfo = res.data.data.sysJavaInfo;
          this.sysJvmMemInfo = res.data.data.sysJvmMemInfo;
          // let data = {
          //   javaName: res.data.data.sysJavaInfo.javaName,
          //   javaVersion: res.data.data.sysJavaInfo.javaVersion,
          //   jvmName: res.data.data.sysJavaInfo.jvmName,
          //   jvmVendor: res.data.data.sysJavaInfo.jvmVendor,
          //   jvmVersion: res.data.data.sysJavaInfo.jvmVersion,
          //   jvmFreeMemory: res.data.data.sysJvmMemInfo.jvmFreeMemory,
          //   jvmMaxMemory: res.data.data.sysJvmMemInfo.jvmMaxMemory,
          //   jvmMemoryUsedRate: res.data.data.sysJvmMemInfo.jvmMemoryUsedRate,
          //   jvmTotalMemory: res.data.data.sysJvmMemInfo.jvmTotalMemory,
          //   jvmUsableMemory: res.data.data.sysJvmMemInfo.jvmUsableMemory,
          //   jvmUsedMemory: res.data.data.sysJvmMemInfo.jvmUsedMemory,
          //   osArch: res.data.data.sysOsInfo.osArch,
          //   osHostAddress: res.data.data.sysOsInfo.osHostAddress,
          //   osHostName: res.data.data.sysOsInfo.osHostName,
          //   osName: res.data.data.sysOsInfo.osName,
          //   osVersion: res.data.data.sysOsInfo.osVersion,
          // };
          // this.data.push(data);
        } else {
          this.$Message.error(res.data.msg);
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.cardView {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dddddd;
}
</style>